<template>
  <div class="login">
    <el-form
      ref="form"
      :model="loginForm"
      label-width="80px"
      v-loading="loginForm.loading"
      element-loading-text="登录中......"
    >
      <h2 class="tit">请登录</h2>
      <el-form-item label="账号">
        <el-input v-model="loginForm.userid"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="loginForm.userpassword" show-password></el-input>
      </el-form-item>
      <el-button class="loginBtn" type="primary" @click="onSubmit">登录</el-button>
    </el-form>
  </div>
</template>

<script>

import { userApi } from "../api";

export default {
  data() {
    return {
      loginForm: {
        userid: "",
        userpassword: "",
        loading: false,
      },
    };
  },
  methods: {
    async onSubmit() {
      this.loginForm.loading = true;
      var data = {
        userid: this.loginForm.userid,
        userpassword: this.loginForm.userpassword,
      };
      userApi
        .passLogin(data)
        .then((result) => {
          this.loginForm.loading = false;
          if (result.status === 200) {
            var status = result.data.status;
            if (status === 0) {
              // 登陆成功
              let info = result.data.obj;
              localStorage.setItem("userInfo",JSON.stringify(info.userInfo));
              localStorage.setItem("userper",JSON.stringify(info.userper));
              this.$message.success("登陆成功！");
              this.$router.push("/");
            }
            if(status === 1001){
              this.$message.error('该用户未注册！');
            }
            if(status === 1008){
              this.$message.error('密码错误');
            }
          }
        })
        .catch((error) => {
          this.loginForm.loading = false;
          if(error.status == 404){
            if(error.data.status == 1002){
              this.$message.error("请输入用户账号！");
            }
          }
          else{
            this.$message.error(error.data.str);
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
  .login{
    position: relative;
    height: 100%;

    .el-form{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -145px;
      margin-left: -200px;
      width: 400px;
      height: 290px;
      box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.5);
      padding: 10px;
      border-radius: 30px;
      text-align: center;
      .el-form-item{
        padding-right: 80px;
      }
      .tit{
        text-align: left;
        padding-left: 80px;
      }
    }
  }
</style>